<template>
	<view class="imagePage">
		<image :src="'/static/my/share.png'" mode=""></image>
		<!-- 推荐好友 -->
		<!-- <image class="recommend" :src="$imageOss(img_hb)" mode=""></image> -->
		<view class="recommend">
			<image class="codeOne" :src="$imageOss(userInfo.avatar)" mode=""></image>
			<view class="tit">
				<view class="title1">{{userInfo.nickname}}</view>
			</view>
			<image class="codeTwo" :src="$imageOss(img_hb)" mode=""></image>
			<!-- <view class="box">
				<button class="invitation btn" @tap.stop="shareClick" open-type="share">
					<image :src="'/static/my/share1.png'" mode=""></image>
				</button>
				<view class="generate" @tap.stop="downloadImage">
					<image :src="'/static/my/share2.png'" mode=""></image>
				</view>
			</view> -->
		</view>
		<view class="box">
			<button class="invitation btn" @tap.stop="shareClick" open-type="share">
				<image :src="'/static/my/share1.png'" mode=""></image>
			</button>
			<view class="generate" @tap.stop="downloadImage">
				<image :src="'/static/my/share2.png'" mode=""></image>
			</view>
		</view>

	</view>
</template>

<script>
	import config from "@/request/baseUrl.js";
	import {
		qrcode,getuserinfo
	} from "@/request/myApi.js";
	export default {
		data() {
			return {
				baseUrl: config.baseUrl,
				// userInfo: uni.getStorageSync('userInfo'),
				share: {},
				img_hb: '',
				all:'',
				avatar:"",
				userInfo:{}
			};
		},
		onLoad() {
			this.getUserInfo()
			this.getQrcode()
		},
		onShareAppMessage() {
			return {
				title: this.share.title,
				path: this.share.path,
				imageUrl: this.share.imageUrl,
				desc: this.share.desc,
				content: this.share.content,
				success(res) {
					this.$utils.toast('分享成功')
					this.share = {}
				},
				fail(res) {
					this.$utils.toast('分享失败')
				}
			}
		},
		methods: {
			getUserInfo() {
				let that = this
				getuserinfo().then(res => {
					if (res.code == 200) {
						that.userInfo = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
						});
					}
				})
			},
			// 推荐好友
			getQrcode() {
				let that = this
				qrcode().then(res => {
					if (res.code == 200) {
						that.img_hb = res.data[0]
						that.all = res.data[1]
					}
				})

			},
			// // 点击下载图片
			downloadImage() {
				let that = this
				let pic = that.baseUrl + that.all
				uni.downloadFile({
					url: pic,
					success(res) {
						let tempFilePath = res.tempFilePath
						uni.saveImageToPhotosAlbum({
							filePath: tempFilePath,
							success(res1) {
								uni.showToast({
									title: '图片生成成功',
									icon: "none",
								});
							},
							fail(err) {
								uni.showToast({
									title: '图片生成失败',
									icon: "none",
								});
							}
						})
					}
				})
			},
			// 点击确定，发给好友
			shareClick() {
				// console.log(this.userInfo.id, 'this.userInfo.id')
				this.share = {
					title: '',
					path: `/pages/bind/login?user_id=${this.userInfo.id}`,
					imageUrl: '',
					desc: '',
					content: ''
				}
			},

		}
	}
</script>

<style lang="less">
	.imagePage {
		width: 100vw;
		height: 100vh;

		button::after {
			border: none;
			padding: 0;
			background-color: #fff;
			margin-left: 94rpx;
			margin: 0;
		}

		button {
			border: none;
			padding: 0;
			// background-color: #fff;
			margin: 0;
		}

		image {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
		}

		.box {
			display: flex;
			justify-content: space-between;
			height: 120rpx;
			width: 76%;
			position: absolute;
			bottom: 16%;
			left: 14%;
		}

		.btn {
			width: 206rpx;
			height: 106rpx;
			line-height: 96rpx;
			text-align: center;
			border: none;
		}

		.invitation {
			width: 38%;

			image {
				width: 96rpx;
				height: 96rpx;
				z-index: 100;
			}
		}

		.generate {
			width: 38%;

			image {
				width: 96rpx;
				height: 96rpx;
			}

		}

		.recommend {
			width: 660rpx;
			height: 1000rpx;
			border-radius: 40rpx;
			background: #fff;
			position: absolute;
			top: 14%;
			left: 6%;

			.tit {
				text-align: center;
				margin: 120rpx 120rpx 100rpx 120rpx;
				font-size: 44rpx;

				.title1 {
					margin-bottom: 30rpx;
					color: #313131;
					font-weight: 600;
				}

				.title2 {
					color: #BABABA;
					font-size: 26rpx;
				}
			}

			.codeOne {
				width: 200rpx;
				height: 200rpx;
				position: absolute;
				border-radius: 50%;
				top: -10%;
				left: 35%;
			}

			.codeTwo {
				width: 460rpx;
				height: 460rpx;
				margin: 260rpx 100rpx;
			}

			.box {
				display: flex;
				justify-content: space-between;
				height: 120rpx;
				width: 100%;
				position: absolute;
				bottom: 8%;
			}

			.btn {
				width: 206rpx;
				height: 106rpx;
				line-height: 96rpx;
				text-align: center;
				border: none;
			}

			.invitation {
				width: 56%;

				image {
					width: 96rpx;
					height: 96rpx;
					z-index: 100;
				}
			}

			.generate {
				width: 42%;

				image {
					width: 96rpx;
					height: 96rpx;
				}

			}
		}
	}
</style>